<template>
  <div class="" v-loading="loading">
    <el-row class="content-head" style="width: 100%">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="content_edit pd_20" style="padding-top: 20px">
        <div id="diy-phone" style="margin-top: 0">
          <div class="diy-phone-header">
            <i class="diy-phone-receiver"></i>
            <div class="diy-phone-title j-pagetitle"></div>
          </div>
          <div class="diy-phone-contain" id="j-materialPrev">
            <h3 class="news">{{ data.title }}</h3>
            <div class="newtime">
              <p>{{ newsName }}</p>
              <p v-if="data.created_time">
                {{ data.created_time | getMonthAndDay }}
              </p>
            </div>
            <div class="materialPrePanel mgt20">
              <div v-if="data.content">
                <div
                  class="single-summary pd10"
                  style="border: none; padding: 5px 5px 0"
                  v-html="data.content"
                ></div>
                <div
                  style="padding-left: 5px; color: #666; margin-bottom: 10px"
                  v-if="data.editor"
                >
                  责任编辑：{{ data.editor }}
                </div>
              </div>
            </div>
          </div>
          <i class="diy-phone-footer"></i>
        </div>
        <div
          class="relative f_l floatBox-width"
          style="margin-left: 25px; position: relative; width: 60%"
        >
          <div class="black">
            <div class="add_con_form">
              <el-form label-width="100px" label-position="left" :model="data">
                <el-form-item label="选择文章分类">
                  <el-col :span="10">
                    <el-select
                      v-model="data.cate_id"
                      placeholder="请选择"
                      @change="handleItemChange"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.title"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item label="文章标题">
                  <el-col :span="24">
                    <el-input
                      placeholder="请输入标题"
                      v-model="data.title"
                      clearable
                    ></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="文章副标题">
                  <el-col :span="24">
                    <el-input
                      placeholder="请输入副标题"
                      v-model="data.description"
                      clearable
                    ></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="文章链接">
                  <el-col :span="24">
                    <el-input
                      placeholder="请输入文章链接"
                      v-model="data.link"
                      clearable
                    ></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="文章来源">
                  <el-col :span="24">
                    <el-input
                      placeholder="请输入文章来源"
                      v-model="data.author"
                      clearable
                    ></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="浏览量">
                  <el-col :span="24">
                    <el-input
                      placeholder="请输入浏览量"
                      v-model="data.hit"
                      clearable
                    ></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="责任编辑">
                  <el-col :span="24">
                    <el-input
                      placeholder
                      v-model="data.editor"
                      clearable
                    ></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="发布时间">
                  <el-col :span="4">
                    <el-date-picker
                      v-model="data.created_time"
                      type="datetime"
                      value-format="timestamp"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-col>
                </el-form-item>

                <el-form-item label="是否显示">
                  <el-col :span="4">
                    <switchc
                      v-model="data.show"
                      @change="getIskeck"
                      text="已开启|已关闭"
                    ></switchc>
                  </el-col>
                </el-form-item>

                <el-form-item label="样式类型">
                  <el-col :span="8">
                    <el-select
                      v-model="data.style"
                      placeholder="请选择"
                      @change="changeStyle"
                    >
                      <el-option label="小图展示" value="0" />
                      <el-option label="无图展示" value="1" />
                      <el-option label="大图展示" value="2" />
                      <el-option label="三图展示" value="3" />
                    </el-select>
                  </el-col>
                </el-form-item>

                <template v-if="data.style != 1">
                  <el-form-item
                    label="图片地址"
                    prop="piclink"
                    v-if="data.style == 0 || data.style == 2"
                  >
                    <el-col :span="12" class="tl">
                      <uploadpic
                        :piclink="data.piclink"
                        :width="300"
                        :height="175"
                        :real_width="140"
                        :real_height="90"
                        :is_more="false"
                        @send_pic="onSuccess"
                      ></uploadpic>
                    </el-col>
                  </el-form-item>
                  <el-form-item
                    label="图片地址"
                    prop="piclink"
                    v-if="data.style == 3"
                  >
                    <el-col
                      :span="8"
                      v-for="(pic, p) in toArr(data.piclink)"
                      :key="p"
                    >
                      <uploadpic
                        :piclink="pic"
                        :width="240"
                        :height="120"
                        :real_width="140"
                        :real_height="90"
                        :is_more="false"
                        @send_pic="onSuccess1($event, p)"
                        :index="p"
                      ></uploadpic>
                    </el-col>
                  </el-form-item>
                </template>
              </el-form>
            </div>
          </div>
          <div class="black">
            <div class="ueditor">
              <el-col :span="24">
                <ue
                  v-model="data.content"
                  v-loading="loading1"
                  v-if="!loading1"
                  :value="data.content"
                  upload-url="/api/common/upload/index/"
                  fileName="file"
                />
              </el-col>

              <div class="blank"></div>
            </div>
          </div>
          <div class="submit_button">
            <el-col :span="24" class="tc">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                @click="subForm"
                >保存</el-button
              >
            </el-col>
          </div>
          <!-- 小箭头 -->
          <i class="arrow arrow_out top150"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import switchc from "@/components/currency/Swich";
import HeadTitle from "@/components/currency/HeadTitle.vue";
import uploadpic from "@/components/page/pic/up_pic";
import ue from "@/components/currency/Ue/ue.vue";

export default {
  data() {
    return {
      loading1: true,
      optionProps: {
        value: "id",
        label: "title",
        children: "z",
      },
      options: [
        {
          value: "",
          label: "",
        },
      ],
      config: {
        qllink: false,
      },
      data: {
        cate_id: "", //分类ID
        title: "", // 文章标题
        description: "",
        content: "",
        piclink: "",
        show: "1",
        author: "",
        editor: "",
        created_time: new Date().getTime(),
      },
      fenlei: "请选择栏目",
      ca_id: "",
      newsFenLeis: "",
      selectedOptions: [],
      newsName: "",
      fileList: [],
      loading: true,
      formLabelWidth: "120",
    };
  },
  watch: {
    getNesFenLei(val) {
      this.options = val;
    },
    $route(to) {
      this.fianNewsFenLei();
    },
  },
  components: {
    switchc,
    HeadTitle,
    ue,
    uploadpic,
  },

  methods: {
    changeStyle() {
      this.data.piclink = "";
    },
    toArr(val) {
      if (val) {
        try {
          var pic = JSON.parse(JSON.stringify(val));
          return pic.split("@");
        } catch {
          return ["", "", ""];
        }
      } else {
        return ["", "", ""];
      }
    },
    onSuccess1(pic, i) {
      var arr = this.toArr(this.data.piclink);
      arr[i] = pic;
      this.data.piclink = arr.join("@");
    },
    onSuccess(pic) {
      this.data.piclink = pic;
    },
    handleItemChange(val) {
      var a = this.options.find((item) => {
        //这里的chargingWorkNameList就是上面遍历的数据源
        return item.id === val;
        //筛选出匹配数据，是对应数据的整个对象
      });
      this.newsName = a.title;
    },
    subForm({ obj }) {
      if (this.data.cate_id == "") {
        this.$fnc.alertError("添加失败!", "文章类别不能为空");
      } else if (this.data.title == "") {
        this.$fnc.alertError("添加失败!", "文章标题不能为空");
      } else if (this.$route.query.id == undefined) {
        this.addNews();
      } else {
        this.updataNews();
      }
    },
    addNews() {
      var params = JSON.parse(JSON.stringify(this.data));
      params.created_time = this.$fnc.phptime(params.created_time);
      this.$api.getNews.addNews(params).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "添加成功",
            url: this.$router.back(-1),
          });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    updataNews() {
      var params = JSON.parse(JSON.stringify(this.data));
      params.id = this.$route.query.id;
      params.created_time = this.$fnc.phptime(params.created_time);
      this.$api.getNews.updateNew(params).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "修改成功",
            url: this.$router.back(-1),
          });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    fianNewsFenLei() {
      if (this.$route.query.id !== undefined) {
        var data = { id: this.$route.query.id };
        this.$api.getNews.selectNews(data).then((res) => {
          if (res.data.code == 200 && res.data.status == 1) {
            this.$nextTick(() => {
              this.data = res.data.result;
              this.data.created_time = this.$fnc.vuetime(
                res.data.result.created_time
              );
              var params = {};
              params.id = res.data.result.cate_id;
              this.$api.getNewsFenlei
                .findNewsFenLeiChildRen(params)
                .then((res) => {
                  this.selectedOptions = res.data.result.split("@");
                  this.newsName = this.selectedOptions[
                    this.selectedOptions.length - 1
                  ];
                  this.loading1 = false;
                });
              if (this.data.editor == "" && this.$store.state.adminname) {
                this.data.editor = this.$store.state.adminname;
              }
              if (this.data.author == "" && this.$store.state.adminTitle) {
                this.data.author = this.$store.state.adminTitle;
              }
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
      } else {
        this.loading1 = false;
      }
    },
    getIskeck(val) {
      this.data.show = val;
    },
  },

  beforeCreate() {
    //数据未加载之前调用loading
    this.loading = true;
    this.$store.dispatch("getNewsCate");
  },
  created() {
    this.UEditorUrl = "";
    this.loading = false;
    this.fianNewsFenLei();
  },
  mounted() {
    if (this.data.editor == "" && this.$store.state.adminname) {
      this.data.editor = this.$store.state.adminname;
    }
    //author

    if (this.data.author == "" && this.$store.state.adminTitle) {
      this.data.author = this.$store.state.adminTitle;
    }
  },
  computed: {
    getNesFenLei() {
      return this.$store.state.newsFeiLei;
    },
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>

<style lang="less" scoped>
td,
th {
  padding: 5px 10px;
  border: 1px solid #ddd;
}
</style>
